<template>
  <div id="app">
    <!-- <Home></Home> -->
    <div class="content">
      <!-- <Cart></Cart> -->
      <router-view v-if="isRouterAlive"></router-view>
    </div>
    <div class="nav">
      <a
        v-for="(item,index) in picList"
        :key="item.name1"
        :class="{active: index == currentIdx}"
        @click="change(index,item.path)"
      >
        <span class="sp1" :class="item.class1">
          <span class="spancycle" v-if="allLength && item.name1==='购物车'">{{allLength}}</span>
          <template v-else></template>
        </span>

        <strong>{{item.name1}}</strong>
      </a>

      <!-- <a href="###" :class="{active : changeclass}" @click="dismis()">
        <span class="icon_brand"></span>
        <strong>品牌</strong>
      </a>
      <a href="###" @click="dismis()">
        <span class="icon_classify"></span>
        <strong>分类</strong>
      </a>
      <a href="###" @click="dismis()">
        <span class="icon_cart"></span>
        <strong>购物车</strong>
      </a>
      <a href="###" @click="dismis()">
        <span class="icon_my"></span>
        <strong>我的</strong>
      </a>-->
    </div>
  </div>
</template>

<script>
// import Home from "./components/Home";
// import Cart from "./components/Cart";
// import My from "./components/My"
// import Login from "./components/Login"
// import Reg from "./components/Reg"
export default {
  name: "app",
  provide() {
    //父组件中通过provide来提供变量，在子组件中通过inject来注入变量。
    return {
      reload: this.reload
    };
  },
  components: {
    // Home,
    // My,
    // Login,
    // Reg,
    // Cart
  },
  data: function() {
    return {
      isRouterAlive: true, //控制视图是否显示的变量
      currentIdx: 0,
      picList: [
        {
          name1: "首页",
          path: "/home",
          class1: "icon_index"
        },
        {
          name1: "品牌",
          path: "/brand",
          class1: "icon_brand"
        },
        {
          name1: "分类",
          path: "/classify",
          class1: "icon_classify"
        },
        {
          name1: "购物车",
          path: "/cart",
          class1: "icon_cart"
        },
        {
          name1: "我的",
          path: "/my",
          class1: "icon_my"
        }
      ],
      changeclass: false
    };
  },
  computed: {
    allLength() {
      return this.$store.getters.cartlistlength;
    }
    // currentStatue() {
    //   window.console.log(this.$store.getters.currentStatue);
    //   // return this.$store.getters.currentStatue;
    //   return this.$store.state.common.user;
    // }
  },
  methods: {
    change(index, path) {
      // window.console.log(index);
      this.currentIdx = index; //动态的改变currentIdx属性
      this.$router.push(path);
    },
    dismis() {
      this.changeclass = !this.changeclass;
    },

    reload() {
      this.isRouterAlive = false; //先关闭，
      this.$nextTick(function() {
        this.isRouterAlive = true; //再打开
      });
    }
  }
};
</script>

<style scoped lang="scss">
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .content {
    height: 100%;
    overflow: auto;
    flex: 1;
  }
  .nav {
    background: #000;
    height: 1.333333rem;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;

    a {
      // display: inline-block;
      // margin-top: 0.133333rem;
      text-decoration: none;
      // height: .8rem;
      // widows: .8rem;

      // display: flex;
      // justify-content: column;
      flex: 1;

      .sp1 {
        display: block;
        width: 0.666667rem;
        height: 0.666667rem;
        background: url(./images/icon.png) no-repeat;
        background-size: 150% auto;
        margin: 0 auto;
        position: relative;
        .spancycle {
          position: absolute;
          right: -0.266667rem;
          display: inline-block;
          width: 0.426667rem;
          height: 0.426667rem;
          background: orange;
          border-radius: 50%;
          font-size: 0.16rem;
          line-height: 0.426667rem;
          color: #fff;
        }
      }

      .icon_index {
        background-position: 0 0;
      }
      .icon_brand {
        background-position: 0 -0.666667rem;
      }
      .icon_classify {
        background-position: 0 -1.333333rem;
      }
      .icon_cart {
        background-position: 0 -2rem;
      }
      .icon_my {
        background-position: 0 -2.666667rem;
      }
      strong {
        font-size: 0.32rem;
        line-height: 0.586667rem;
        color: #fff;
        font-weight: 400;
      }
    }
    .active {
      color: #1b9015;
      strong {
        display: none;
      }
      span {
        width: 0.8rem;
        height: 0.8rem;
        background-size: 150% auto;
      }
      .icon_brand {
        background-position: 0 -0.8rem;
      }
      .icon_classify {
        background-position: 0 -1.6rem;
      }
      .icon_cart {
        background-position: 0 -2.4rem;
      }
      .icon_my {
        background-position: 0 -3.2rem;
      }
    }
  }
}
</style>
